<!DOCTYPE html>
<script>
    //goHomeIfNeeded
    (function() {
        var match = window.location.hash.match(/#([0-9]*)/i)
        if(match){
            var ts = parseInt(match[1]);
            var now = new Date().getTime() / 1000;
            var dt = now - ts;
            if (ts && 0 <= dt && dt < 3600) {
                return;
            }
        }
        window.location.href = "index.html";
    })();
</script>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>三国霸业</title>
        <link rel="stylesheet" type="text/css" href="baye.css" />
        <link rel="stylesheet" type="text/css" href="introjs.min.css" />
        <link rel="icon" href="favicon.png">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta name="apple-touch-fullscreen" content="yes"/>
        <meta name="apple-mobile-web-app-title" content="三国霸业">
        <meta name="full-screen" content="yes"><!-- UC强制全屏 -->
        <meta name="x5-fullscreen" content="true"><!-- QQ强制全屏 -->
        <meta name="browsermode" content="application"><!-- UC应用模式 -->
        <meta name="x5-page-mode" content="app"><!-- QQ应用模式 -->
        <meta name="msapplication-tap-highlight" content="no"><!-- windows phone 点击无高光 -->
        <link rel="apple-touch-icon-precomposed" sizes="57x57" href="favicon.png"><!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon.png"><!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon.png"><!-- Retina iPad，144x144 像素，可以没有，但推荐有 --><!-- iOS 图标 end -->
        <style>
            body {
                overflow: hidden;
                margin:0px;
            }
            .controlPanel{
                filter: alpha(opacity=80); opacity: 0.8; 
                font-size:40px;
                z-index:1000;
                position:absolute;
                color:white;
                text-align:center;
            }
            #directionControl{
                left:0px; top:0px; width:75%; height:100%;
            }
            #menuControl{
                right:0px; top:0px; width:25%; height:100%;
            }
            #cancelControl{
                right:0px; top:0px; width:100%; height:50%; 
            }
            #enterControl{
                right:0px; bottom:0px; width:100%; height:50%; 
            }
            .menu {margin-top:2px;}
        </style>
        <script>
            var _hmt = _hmt || [];
            (function() {
                var hm = document.createElement("script");
                hm.src = "//hm.baidu.com/hm.js?55cdc246d0c836cecfdf39ce0d5657f3";
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(hm, s);
            })();
        </script>
        <script src="js/jquery.min.js"></script>
        <script src="js/encoding-indexes.js"></script>
        <script src="js/encoding.js"></script>
        <script src="js/sprintf.js"></script>
        <script src="js/lzma_worker-min.js"></script>
        <script src="js/base64.js"></script>
    </head>
    <body id="touchpad">
        <div class="container" style="">
            <div class="dummy"></div>
            <div class="element lcd" id="lcd-container">
                <canvas class="fill lcd" id="lcd" width="160" height="96">然而你的浏览器并不支持HTML5</canvas>
                <div class="controlPanel" id="directionControl" ontap="sendKey(VK_ENTER)" data-step="1" data-intro="上下左右滑动，控制方向,触击“确定”"></div>
                <div class="controlPanel" id="menuControl" ontap="sendKey(VK_EXIT)" data-step="2" data-intro="下上滑动为“搜索”，上下滑动为“帮助”"></div>
            </div>
        </div>
    </body>
</html>
<script src="js/tappy.js"></script>
<script src="js/bridge.js?ver=201801201234"></script>
<script src="js/lcd.js?ver=11"></script>
<script src="js/baye.js?ver=201801201234"></script>
<script src="http://cdn.bootcss.com/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>
<script>

(function (){
    lcdInit();

    function tap(){
        var action = $(this).attr("ontap");
        $(this).bind( "tap", function(){
            eval(action);
        });
    }
    $(".controlPanel").each(tap);

    $("#menuControl").swipe( {
        swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
            switch(direction){
                case 'left':
                case 'up':
                    sendKey(VK_SEARCH);
                    break;
                case 'down':
                case 'right':
                    sendKey(VK_HELP);
                    break;
            }
        },
        //Default is 75px, set to 0 for demo so any distance triggers swipe
        threshold:0
    });
    touchPadInit("directionControl");
})();


function reloadLCD(){
    var height = window.innerHeight;
    var width = window.innerWidth;
    console.log(height,width);

    if (height > width) {
        console.log('竖屏状态');
        $("#lcd-container").css({
            'height': width + 'px',
            'width': height + 'px',
            'transform-origin' : 'left top',
            'transform' : 'rotate(-90deg) translateX(-' + height + 'px)',
        });
        lcdRotateMode = 2;
    } else {
        console.log('横屏状态');
        $("#lcd-container").css({
            'height' : height + 'px',
            'width' : width + 'px',
            '-webkit-transform' : 'rotate(0deg)',
            'transform' : 'rotate(0deg)',
        });
        lcdRotateMode = 0;
    }
}


(function (){
    reloadLCD();

    //判断手机横竖屏状态：
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        reloadLCD();
    }, false);

    $(window).resize(reloadLCD);
    bayeMain();
})();

</script>
